<template>
  <el-dialog :title="'收银详情'" :close-on-click-modal="false" :visible.sync="visible" @closed="close()" width="70%">
    <div class="mod-config" style="display: -webkit-flex;justify-content: center;">
      <el-form :inline="true" :model="dataForm" class="cash-form">
        <el-row>
          <el-form-item label="收银店铺:">
            <span>{{dataForm.shopName}}</span>
          </el-form-item>
          <el-form-item label="操作员:" style="float: right;">
            <span>{{ dataForm.operator }}</span>
          </el-form-item>
        </el-row>
        <el-row class="order-info-row">
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单号:">
                <span>{{ dataForm.sn }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开单员:">
                 <span v-if="dataForm.kaidanUser">{{ dataForm.kaidanUser.name + '-' + dataForm.kaidanUser.mobile }}</span>
                 <span v-else>&nbsp;</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="顾客类型:">
                <span>{{ dataForm.vipCardTypeStr }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="顾客姓名:">
                <span>{{ dataForm.memberName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话:">
                <span>{{ dataForm.memberMobile }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="会员卡号:">
                <span>{{ dataForm.vipCardNo }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <el-row class="table-row">
          <el-table :data="goodsList" border style="width: 100%;">
            <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称" width="200">
            </el-table-column>
            <el-table-column prop="goodsCatName" header-align="center" align="center" label="商品类型">
            </el-table-column>
            <el-table-column prop="goodsPrice" header-align="center" align="center" label="单价">
            </el-table-column>
            <el-table-column header-align="center" align="center" label="折扣率">
              <template slot-scope="scope">
                <span>{{ scope.row.goodsDiscount + '%' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="goodsNum" header-align="center" align="center" label="数量">
            </el-table-column>
            <el-table-column header-align="center" align="center" label="可用卡类型" width="180">
              <template slot-scope="scope">
                <span>{{ getCardTypeStr(scope.row.cardType) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="amount" header-align="center" align="center" label="合计">
              <template slot-scope="{row}">
                <span>{{ floatObj.multiply(row.discountPrice,row.goodsNum) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="商品合计:">
              <span>{{ dataForm.orderAmount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="余额抵扣:">
              <span>{{ dataForm.balanceAmount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="积分抵扣:">
              <span>{{ dataForm.pointsCost }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="实付:">
              <span>{{ dataForm.payAmount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="赠送积分:">
              <span>{{ dataForm.pointsGive }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      orderId: Number
    },
    data() {
      return {
        visible: false,
        dataForm: {
          id: this.orderId
        },
        goodsList: [],
        cardTypes: [{
            label: '次卡',
            value: 1
          },
          {
            label: '充值卡',
            value: 2
          },
          {
            label: '积分卡',
            value: 3
          },
          {
            label: '散客',
            value: 4
          },
        ]
      }
    },
    components: {

    },
    activated() {

    },
    methods: {
      init(){
        this.visible = true
        this.dataForm.id = this.orderId
        this.$nextTick(() => {
          this.orderInfo()
        })
      },
      // 获取当前登录用户信息
      orderInfo() {
        this.$http({
          url: this.$http.adornUrl(`/cash/order/detail/${this.dataForm.id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.dataForm = data.data.order
            this.goodsList = data.data.goodsList
          }
        })
      },
      getCardTypeStr(cardType) {
        var str = ""
        if (cardType == null || cardType == "" || cardType == undefined) {
          return str
        }
        var cardTypeList = cardType.split(',')
        cardTypeList.forEach(item => {
          this.cardTypes.forEach(item1 => {
            if (item == item1.value) {
              str += "," + item1.label
              return
            }
          })
        })
        return str.substring(1, str.length)
      },
      close(){
        this.visible = false
        this.$nextTick(() => {
          this.$emit('close')
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  .cash-form {
    width: 90%;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    >.el-row {
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 5px;
    }

    .table-row {
      margin-top: 20px;
      border-bottom: none !important;
    }

    .vip-card-info-row {
      .el-form-item {
        margin-bottom: 5px;
      }
    }

    .button-row {
      padding-bottom: 5px;

      .el-form-item {
        margin-bottom: 0;
      }
    }

  }
</style>
